<template>
	<view>
		<view class="login-box">
			<view class="logo">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="logo-input">
				<u-input v-model="parmes.name" :type="type" :custom-style="customStyleInput" placeholder="姓名" />
				<view class="input-view"></view>
				<u-input v-model="parmes.phone" :type="type" :custom-style="customStyleInput" placeholder="手机号" />
				<view class="input-view"></view>
				<u-input v-model="parmes.credential" type="password" :custom-style="customStyleInput" placeholder="密码" />
				<view class="input-view"></view>
				<u-input v-model="companyName" :type="type" :custom-style="customStyleInput" placeholder="所属单位" @click="unitShow = true" />
				<view class="input-view"></view>
				<u-input v-model="professionName" :type="type" :custom-style="customStyleInput" placeholder="工种" @input="getProfessionsList" />
				<view class="input-view"></view>
				<u-input v-model="parmes.employeeNumber" :type="type" :custom-style="customStyleInput" placeholder="员工编号" />
				<view class="input-view"></view>
				<!-- <u-input v-model="parmes.identityNumber" :type="type" :custom-style="customStyleInput" placeholder="身份证号" />
				<view class="input-view"></view> -->
				<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="registerButton">注册</u-button>
				<u-button :custom-style="customStyleButton1" :hair-line="false" @click="cancel" hover-class="none">取消</u-button>
			</view>
		</view>
		<u-action-sheet :list="unitList" v-model="unitShow" @click="unitListCallback"></u-action-sheet>
		<u-select v-model="workShow" :list="workList" @confirm="workListCallback"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {register,companiesList,professionsList,nameMatches} from '../../api/api.js'
	export default {
		data() {
			return {
				value:'',
				customStyleInput:{
					backgroundColor:'#FAFBFF',
					paddingLeft: '20rpx',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				customStyleButton:{
					marginTop:"50rpx",
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				customStyleButton1:{
					marginTop:"30rpx",
					border:"none"
				},
				companyName:'',		// 单位名称
				professionName:'',	// 工种名称
				parmes:{
					companyId:'',		// 单位
					credential:'',		// 密码
					employeeNumber:'',	// 工号
					identityNumber:'',	// 身份证号
					name:'',		// 姓名
					phone:'',		// 手机号
					professionId:'', //工种1
				},
				unitShow:false,		// 单位select
				unitList:[],		// 单位列表
				workShow:false,		// 工种select
				workList:[]			// 工种列表
			}
		},
		mounted() {
			this.getCompaniesList()
		},
		methods: {
			unitListCallback(index) {
				this.parmes.companyId = this.unitList[index].id
				this.companyName = this.unitList[index].name
			},
			workListCallback(item) {
				this.parmes.professionId = item[0].value
				this.professionName = item[0].label
			},
			// 所属单位列表
			getCompaniesList(){
				companiesList().then(resp=>{
					resp.forEach(e=>{
						e.text = e.name
					})
					this.unitList = resp
				})	
			},
			// 工种列表
			getProfessionsList(){
				let parmes = {
					companyId: this.parmes.companyId,
					name: this.professionName
				}
				nameMatches(parmes).then(resp=>{
					resp.forEach(e=>{
						e.value = e.id
						e.label = e.name
					})
					this.workList = resp
					if(this.workList.length == 0) return
					this.workShow = true
				})
			},
			// 注册
			registerButton(){
				register(this.parmes).then(resp=>{
					if(resp == ''){
						this.$refs.uToast.show({
							title: '注册成功',
							url: `/pages/login/login?employeeNumber=${this.parmes.employeeNumber}&pwd=${this.parmes.credential}`
						})
					}
				})
			},
			cancel(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.login-box{
	image{
		width: 100%;
	}
	padding: 0 60rpx;
	.logo{
		margin-top: 100rpx;
		width: 400rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.logo-input{
		margin-bottom: 50rpx;
		margin-top: 100rpx;
		.input-view{
			height: 20rpx;
			text-align: center;
		}
	}
}
</style>
